<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
		<script src="../assets/flexible/flexible.debug.js"></script>
		<script src="../assets/flexible/flexible_css.debug.js"></script>
		<!--[if lt IE 9]>
	        <script src="../assets/html5shiv.min.js"></script>
			<script src="../assets/respond.min.js"></script>
	    <![endif]-->
	    <link rel="stylesheet" href="../assets/font-awesome/4.5.0/css/font-awesome.min.css"/>
		<link rel="stylesheet" href="../assets/swiper/css/swiper.min.css"/>
		<link rel="stylesheet" href="../css/header.css"/>
		<link rel="stylesheet" href="../css/tabswiper.css"/>
		<link rel="stylesheet" href="../css/glance.css"/>
		<link rel="stylesheet" href="../assets/swiper/css/animate.min.css"/>
		<link rel="stylesheet" href="../css/mark.css"/>
		<title>商品浏览</title>
	</head>
	<body>
		<header class="header">
			<div class="h-left h-back">
				<i class="fa fa-angle-left"></i>
			</div>
			<div class="h-center h-bor">
				<p>耐克</p>
			</div>
			<div class="h-right h-dab">
				<a href="#" class="togweb"><img src="../images/glance/images/glanceimgs_03.png"/></a>
				<a href="#" class="share_open"><img src="../images/glance/images/glanceimgs_05.png"/></a>
			</div>
		</header>
		<main class="main">
			<section class="container">
				<div class="swiper-container list">
					<div class="swiper-wrapper">
						<div class="swiper-slide active-nav">默认</div>
						<div class="swiper-slide">销量</div>
						<div class="swiper-slide">价格</div>
						<div class="swiper-slide">折扣</div>
					</div>
					<div class="shai">筛选</div>
				</div>
				<section class="swiper-container opts">
					<figrue class="swiper-wrapper">
						<div class="swiper-slide options"></div>
						<div class="swiper-slide options"></div>
						<div class="swiper-slide options"></div>
						<div class="swiper-slide options"></div>
					</figrue>
				</section>
			</section>
		</main>
		<section class="mask">
			<div class="col">
				<div class="col_opts">
					<h5>分类<span><i class="fa fa-angle-down"></i></span></h5>
					<ul>
						<li>运动鞋</li>
						<li>运动服</li>
						<li>配饰</li>
						<li>休闲运动包</li>
						<li>运动配件</li>
						<li>运动生活/板鞋</li>
					</ul>
				</div>
				<div class="col_opts">
					<h5>品牌<span><i class="fa fa-angle-down"></i></span></h5>
					<ul>
						<li>耐克</li>
					</ul>
				</div>
				<div class="col_opts">
					<h5>性别<span><i class="fa fa-angle-down"></i></span></h5>
					<ul>
						<li>男</li>
						<li>女</li>
					</ul>
				</div>
				<div class="col_opts">
					<h5>价格区间<span><i class="fa fa-angle-down"></i></span></h5>
					<div class="scope">
						<input type="text" class="ipts"/>
						<span>——</span>
						<input type="text" class="ipts"/>
					</div>
					<ul>
						<li>0-50</li>
						<li>51-100</li>
						<li>101-200</li>
						<li>201-300</li>
						<li>301-500</li>
						<li>501-700</li>
					</ul>
				</div>
				<div class="col_opts">
					<h5>尺码<span><i class="fa fa-angle-down"></i></span></h5>
					<ul>
						<li>2XL</li>
						<li>35.5</li>
						<li>36</li>
						<li>36.5</li>
						<li>37.5</li>
						<li>38</li>
					</ul>
				</div>
				<div class="have">
					<dl class="radios ha_active">
						<dt><img src="../images/glance/glanceimgs1.png"/></dt>
						<dd>仅看有货商品</dd>
					</dl>
					<dl class="radios">
						<dt><img src="../images/glance/glanceimgs.png"/></dt>
						<dd>全部</dd>
					</dl>
				</div>
				<div class="col_nav">
					<p>清空筛选条件</p>
					<p>确定</p>
				</div>
			</div>
			<div class="share swiper-container">
				<div class="sh_top swiper-wrapper">
					<div class="swiper-slide">
						<dl class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="0.3s" swiper-animate-delay="0.5s">
							<dt>
								<img src="../images/share-imgs/images/share_imgs_19.png"/>
							</dt>
							<dd>微信好友</dd>
						</dl>
						<dl class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="0.3s" swiper-animate-delay="0.7s">
							<dt>
								<img src="../images/share-imgs/images/share_imgs_18.png"/>
							</dt>
							<dd>微信朋友圈</dd>
						</dl>
						<dl class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="0.3s" swiper-animate-delay="0.9s">
							<dt>
								<img src="../images/share-imgs/images/share_imgs_16.png"/>
							</dt>
							<dd>微信收藏</dd>
						</dl>
						<dl class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="0.3s" swiper-animate-delay="1.1s">
							<dt>
								<img src="../images/share-imgs/images/share_imgs_09.png"/>
							</dt>
							<dd>QQ好友</dd>
						</dl>
						<dl class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="0.3s" swiper-animate-delay="1.3s">
							<dt>
								<img src="../images/share-imgs/images/share_imgs_07.png"/>
							</dt>
							<dd>新浪微博</dd>
						</dl>
						<dl class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">
							<dt>
								<img src="../images/share-imgs/images/share_imgs_05.png"/>
							</dt>
							<dd>复制链接</dd>
						</dl>
					</div>
				</div>
				<div class="sh_bottom">
					<img src="../images/share-imgs/images/share_imgs_03.png"/>
				</div>
			</div>
		</section>
		<script src="../assets/jquery-3.2.1.min.js"></script>
		<script src="../assets/swiper/js/swiper.jquery.min.js"></script>
		<script src="../assets/swiper/js/swiper.animate1.0.2.min.js"></script>
		<script src="../assets/template-web.js"></script>
		<script src="../js/glance.js"></script>
		<script type="text/html" id="teplate">
			{{each list v}}
				<dl class="width">
					<dt>
						<img src={{v.shopImgs}}/>
					</dt>
					<dd>
						<h5>{{v.title}}</h5>
						<p>{{v.privilege}}</p>
						<div class="opts_bottom">
							<div class="opb_left">
								<h4>{{v.pirce}}<span>{{v.discount}}</span></h4>
								<p>满减</p>
							</div>
							<div class="opb_right">
								<a href="#"><img src="../images/glance/images/glanceimgs_21.png"/></a>
							</div>
						</div>
					</dd>
				</dl>
			{{/each}}
		</script>
	</body>
</html>
